import { type CreateConnectorFn, createConnector } from '@wagmi/vue'
import { type CoinbaseWalletParameters, coinbaseWallet as coinbaseConnector } from '@wagmi/vue/connectors'
import { isIOS } from '../../../utils/isMobile'
import type { Wallet, WalletDetailsParams } from '../../../types/Wallet'
import { coinbaseWalletIcon } from './coinbaseWalletIcon'

export interface CoinbaseWalletOptions {
  appName: string
  appIcon?: string
}

interface CoinbaseWallet {
  (params: CoinbaseWalletOptions): Wallet
  preference?: CoinbaseWalletParameters<'4'>['preference']
}

export const coinbaseWallet: CoinbaseWallet = ({ appName, appIcon }) => {
  const getUri = (uri: string) => uri
  const ios = isIOS()

  return {
    id: 'coinbase',
    name: 'Coinbase Wallet',
    shortName: 'Coinbase',
    rdns: 'com.coinbase.wallet',
    iconUrl: coinbaseWalletIcon,
    iconAccent: '#2c5ff6',
    iconBackground: '#2c5ff6',
    // If the coinbase wallet browser extension is not installed, a popup will appear
    // prompting the user to connect or create a wallet via passkey. This means if you either have
    // or don't have the coinbase wallet browser extension installed it'll do some action anyways
    installed: true,
    downloadUrls: {
      android: 'https://play.google.com/store/apps/details?id=org.toshi',
      ios: 'https://apps.apple.com/us/app/coinbase-wallet-store-crypto/id1278383455',
      mobile: 'https://coinbase.com/wallet/downloads',
      qrCode: 'https://coinbase-wallet.onelink.me/q5Sx/fdb9b250',
      chrome: 'https://chrome.google.com/webstore/detail/coinbase-wallet-extension/hnfanknocfeofbddgcijnmhnfnkdnaad',
      browserExtension: 'https://coinbase.com/wallet'
    },
    ...(ios
      ? {}
      : {
          qrCode: {
            getUri,
            instructions: {
              learnMoreUrl: 'https://coinbase.com/wallet/articles/getting-started-mobile',
              steps: [
                {
                  description: 'We recommend putting Coinbase Wallet on your home screen for quicker access.',
                  step: 'install',
                  title: 'Open the Coinbase Wallet app'
                },
                {
                  description: 'You can easily backup your wallet using the cloud backup feature.',
                  step: 'create',
                  title: 'Create or Import a Wallet'
                },
                {
                  description: 'After you scan, a connection prompt will appear for you to connect your wallet.',
                  step: 'scan',
                  title: 'Tap the scan button'
                }
              ]
            }
          },
          extension: {
            instructions: {
              learnMoreUrl: 'https://coinbase.com/wallet/articles/getting-started-extension',
              steps: [
                {
                  description:
                    'We recommend pinning Coinbase Wallet to your taskbar for quicker access to your wallet.',
                  step: 'install',
                  title: 'Install the Coinbase Wallet extension'
                },
                {
                  description:
                    'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.',
                  step: 'create',
                  title: 'Create or Import a Wallet'
                },
                {
                  description:
                    'Once you set up your wallet, click below to refresh the browser and load up the extension.',
                  step: 'refresh',
                  title: 'Refresh your browser'
                }
              ]
            }
          }
        }),
    createConnector: (walletDetails: WalletDetailsParams) => {
      const connector: CreateConnectorFn = coinbaseConnector({
        appName,
        appLogoUrl: appIcon,
        preference: coinbaseWallet.preference
      })

      return createConnector((config) => ({
        ...connector(config),
        ...walletDetails
      }))
    }
  }
}
